<template>
  <div class="banner-swiper">
    <!-- 使用uni-app的swiper组件 -->
    <swiper 
      :autoplay="true" 
      :circular="true" 
      :interval="3000"
      indicator-dots
      indicator-color="rgba(255,255,255,0.5)"
      indicator-active-color="#ffffff"
    >
      <swiper-item v-for="(item, index) in banners" :key="index">
        <!-- 本地图片使用相对路径，网络图片直接写URL -->
        <image 
          :src="item.image" 
          mode="aspectFill" 
          class="banner-image" 
        />
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'BannerSwiper',
  data() {
    return {
      // 这里替换为你实际的图片路径
      banners: [
        { 
          image: '/static/banners/banner1.jpg', // 本地图片示例
         // link: '/pages/detail/detail?id=1'   // 可选：点击跳转链接
        },
        { 
          image: '/static/banners/banner2.jpg', // 网络图片示例
         // link: '/pages/detail/detail?id=2'
        },
        { 
          image: '/static/banners/banner3.jpg',
         // link: '/pages/detail/detail?id=3'
        },
        { 
          image: '/static/banners/banner4.jpg',
          //link: '/pages/detail/detail?id=4'
        }
      ]
    }
  },
  methods: {
    // 点击轮播图跳转（可选）
    navigateTo(link) {
      uni.navigateTo({
        url: link
      });
    }
  }
}
</script>

<style scoped>
.banner-swiper {
  width: 100%;
  height: 300rpx;
  margin: 0 auto;
}

.banner-image {
  width: 100%;
  height: 100%;
  display: block;
}
</style>